<template>
  <div id="histogram" :style="{'min-height': height + 'px'}">
    <div v-if="spinning" class="mask">
      <a-spin :spinning="spinning" tip="Loading..." />
    </div>
    <a-row>
      <a-col v-if="title" :span="20">
        <div class="chart-title">{{title}}</div>
      </a-col>
    </a-row>
    <div :style="{'min-height': height + 'px'}" v-if="!data.length && spinning"></div>
    <div v-if="visible" :id="container"></div>
    <div v-if="showButton">
      <div class="flex button-box">
        <div class="button-item" :class="{active: activeIndex === index}" v-for="(item, index) in btns" :key="index" @click="handleFilter(item, index)">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue, Prop } from 'vue-property-decorator';
import { Chart } from '@antv/g2';

@Component
export default class Histogram extends Vue {
  @Prop({ type: String, default: '' }) title!: string; // 图表标题
  @Prop({ type: String, default: 'histogramChart' }) container!: string; // 渲染chart的节点id
  @Prop({ type: Boolean, default: false }) showButton!: boolean; // 筛选按钮
  @Prop({ type: Number, default: 200 }) height!: number; // 高度
  @Prop({ type: Object, default: () => ({ }) }) chartOptions!: any; // Chart配置参数
  @Prop({ type: Array, default: () => [20, 20, 20, 50] }) padding!: number[]; // chart的padding值
  @Prop({ type: Array, default: () => [] }) data!: any[]; // 数据源
  @Prop({ type: String }) valueName!: string; // 数据源的属性名，y轴。值
  @Prop({ type: String }) keyName!: string; // 数据源的属性名，x轴。
  @Prop({ type: Array, default: () => [] }) btns!: any[]; // 切换筛选按钮

  activeIndex: number = 0
  visible: boolean = true
  spinning: boolean = true

  @Watch('data')
  dataChange () {
    this.spinning = true
    this.visible = false
    setTimeout(() => {
      this.visible = true
      this.$nextTick(() => {
        this.initHistogramChart()
      })
    }, 0);
  }
  handleFilter (item: any, index: number) {
    this.activeIndex = index
    this.spinning = true
    this.$emit('change', item)
  }
  initHistogramChart () {
    const chart = new Chart({
      container: this.container,
      padding: this.padding,
      height: this.height,
      autoFit: true,
      ...this.chartOptions
    });

    chart.data(this.data);
    chart.scale('sales', {
      nice: true
    });

    chart.tooltip({
      showMarkers: false
    });
    chart.axis(this.keyName, {
      label: {
        style: {
          fill: '#000'
        }
      }
    })
    chart.axis(this.valueName, {
      label: {
        style: {
          fill: '#000'
        },
        formatter: (text: string) => {
          return this.$util.axisLabel(text)
        }
      }
    })
    chart.interaction('active-region');

    chart.tooltip({
      showTitle: false
    })

    chart.legend(false)

    chart.interval().position(`${this.keyName}*${this.valueName}`)
    .color(this.valueName, '#51A9FF')
    .animate({
      appear: {
        duration: 3000
      }
    })
    .tooltip(`${this.keyName}*${this.valueName}`, (a: any, b: any) => ({
      name: a,
      value: b
    }));

    chart.render();
    this.spinning = false
  }
}
</script>
<style lang='scss' scoped>
#histogram {
  position: relative;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
}
.chart-title {
  padding: 40px 0 20px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-box {
  width: 80%;
  justify-content: center;
  margin: 20px 10% 0;
  .button-item {
    width: 80px;
    padding: 3px 0;
    border-radius: 5px;
    text-align: center;
    color: #51A9FF;
    cursor: pointer;
    &.active {
      color: #1FDEDB;
      background-color: rgba(34, 226, 223, 0.19);
    }
  }
}
</style>
